<template>
	<view class="shopcat">
		<!-- 顶部编辑栏 -->
		<view class="shop-tab">
			<view class="shop-tab-left">
				<uni-icons type="shop" size="20"></uni-icons>
				<view class="shop-name">㤫原创</view>
				<uni-icons type="forward" size="20" color="#B0B0B0"></uni-icons>
			</view>
			<view class="shop-tab-right" @click="editBtn">{{isEdit ? '完成' : '编辑'}}</view>
		</view>
		<!-- 商品列表 -->
		<view class="goods-list" v-for="(item,index) in goodsList" :key="index">
			<navigator class="goods-item" hover-class="none">
				<view class="goods-top">
					<view class="goods-slecet-btn">
						<radio v-if="!isEdit" value="btn" :checked="item.selected" color="red" @click.stop="radioSelect(index)" />
						<radio v-else value="btn" :checked="item.editSelected" color="red" @click.stop="radioEdit(index)" />
					</view>
					<view class="goods-img">
						<image :src="item.img_url" mode="scaleToFill"></image>
					</view>
					<view class="goods-info">
						<view class="goods-description">{{item.title}}</view>
						<view class="goods-guige" @click.stop="openPopup(index)">{{item.guige}}
							<uni-icons class="icon-arrowdow" type="arrowdown" size="15" color="#acadaf"></uni-icons>
						</view>
					</view>
				</view>
				<view class="goods-bottom">
					<view class="blank-box"></view>
					<view class="goods-price-wrap">
						<view class="goods-peice">
							<text>¥</text>{{item.price}}
						</view>
						<button-grounp v-model="item.number"></button-grounp>
					</view>
				</view>
			</navigator>
		</view>
		<!-- 底部结算栏 -->
		<view class="settle-accounts">
			<view class="accounts-left">
				<view class="selectAll">
					<label @click="selectAllHandler">
						<radio class="radio" value="全选" :checked="isEdit ? isAllSelectEdit : isAllSelected" color="red"></radio>全选
					</label>
				</view>
				<view class="total-price">
					<template v-if="!isEdit">
						<text>合计:</text>
						<text class="total-num">¥{{totalPrice}}</text>
					</template>
				</view>
			</view>
			<view class="accounts-right">
				<button class="settle-btn" size="mini" type="warn" @click.stop="billHandle">{{isEdit ? '删除' : '结算'}}</button>
			</view>
		</view>
		<!--商品规格选择弹出层 -->
		<uni-popup ref="popup" type="bottom">
			<view class="bottm-popup">
				<view class="guige-top">
					<view class="guige-img">
						<image :src="popupGoodsInfo.img_url"></image>
					</view>
					<view class="guige-price-wrap">
						<view class="guige-close-box">
							<uni-icons type="closeempty" size="20" @click="closePopup"></uni-icons>
						</view>
						<view class="guige-price">
							¥ {{popupGoodsInfo.price}}
						</view>
						<view class="guige-emaining">
							剩余 728 件
						</view>
						<view class="guige-description">
							选择 规格
						</view>
					</view>
				</view>
				<view class="guige-body">
					<view class="guige-body-tips">
						规格:
					</view>
					<view class="goods-box-wrap">
						<view class="goods-item">
							<view class="goods-item-img" v-if="popupGoodsInfo.img_url">
								<image :src="popupGoodsInfo.img_url"></image>
							</view>
							<view class="goods-item-text">
								{{popupGoodsInfo.guige}}
							</view>
						</view>
					</view>
				</view>
				<view class="guige-sure">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				number: 10, // 商品数量
				isEdit: false, // 是否编辑状态
				goodsList: [
					{
					title:'㤫原创《五星出东方》麒麟夜光款精品定制手机壳包邮',
					guige:'宋意中秋礼盒',
					price:128,
					number:1,
					selected:false,
					editSelected:false,
					img_url:'http://pic.yupoo.com/isfy666/e6ef878f/e88c71ae.jpg'
					},
					{
					title:'㤫原创《五星出东方》麒麟夜光款精品定制手机壳包邮',
					guige:'宋意中秋礼盒',
					price:188,
					number:5,
					selected:false,
					editSelected:false,
					img_url:'http://pic.yupoo.com/isfy666/e6ef878f/e88c71ae.jpg'
					},
					{
					title:'㤫原创《五星出东方》麒麟夜光款精品定制手机壳包邮',
					guige:'宋意中秋礼盒',
					price:168,
					number:3,
					selected:false,
					editSelected:false,
					img_url:'http://pic.yupoo.com/isfy666/eb1d0413/3083ea4a.jpg'
					},
					{
					title:'㤫原创《五星出东方》麒麟夜光款精品定制手机壳包邮',
					guige:'宋意中秋礼盒(大礼包)',
					price:118,
					number:2,
					selected:false,
					editSelected:false,
					img_url:'http://pic.yupoo.com/isfy666/a170f298/75df2a1e.jpg'
					},
					{
					title:'㤫原创《五星出东方》麒麟夜光款精品定制手机壳包邮',
					guige:'宋意中秋礼盒',
					price:122,
					number:1,
					selected:false,
					editSelected:false,
					img_url:'http://pic.yupoo.com/isfy666/e6ef878f/e88c71ae.jpg'
					},
				],
				// 弹出层商品信息
				popupGoodsInfo: {}
			};
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				uni.request({
					url: 'http://api_dev.wanxikeji.cn/api/shoppingCarList', //仅为示例，并非真实接口地址。
					method: "POST",
					data: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						console.log(res.data);
					}
				});
			} else {

			}
		},
		methods: {
			// 编辑按钮
			editBtn() {
				if (this.isEdit) {
					this.goodsList.forEach(item => item.editSelected = false);
				}
				this.isEdit = !this.isEdit;
			},
			// 打开弹出层
			openPopup(index) {
				this.popupGoodsInfo = this.goodsList[index];
				this.$refs.popup.open();
			},
			// 关闭弹出层
			closePopup() {
				this.$refs.popup.close()
			},
			// 全选按钮处理器 分情况处理
			selectAllHandler() {
				return this.isEdit ? this.editSelectAll() : this.settleSelectAll();
			},
			// 结算状态下全选按钮处理器
			settleSelectAll() {
				if (this.isAllSelected) {
					this.goodsList.forEach(item => item.selected = false)
				} else {
					this.goodsList.forEach(item => item.selected = true)
				}
			},
			// 编辑状态下全选按钮处理器
			editSelectAll() {
				if (this.isAllSelectEdit) {
					this.goodsList.forEach(item => item.editSelected = false)
				} else {
					this.goodsList.forEach(item => item.editSelected = true)
				}
			},
			// 单选按钮处理事件(结算)
			radioSelect(index) {
				this.goodsList[index].selected = !this.goodsList[index].selected;
			},
			// 单选按钮处理事件(编辑)
			radioEdit(index) {
				this.goodsList[index].editSelected = !this.goodsList[index].editSelected;
			},
			// 结算按钮 分情况处理
			billHandle() {
				if (this.isEdit) {
					this.deleteGoods()
				} else {
					this.billGoods();
				}
			},
			// 删除商品
			deleteGoods() {
				this.goodsList = this.goodsList.filter(item => !item.editSelected)
			},

			// 结算商品
			billGoods() {

			}
		},

		computed: {
			// 商品总价
			totalPrice() {
				var arr = this.goodsList.map(item => item.selected && item.price * item.number);
				return !arr.length ? 0 : arr.reduce((a, b) => a + b)
			},
			// 判断是否全选
			isAllSelected() {
				return !!this.goodsList.length && this.goodsList.every(item => item.selected);
			},
			// 编辑状态下是否全选
			isAllSelectEdit() {
				return !!this.goodsList.length && this.goodsList.every(item => item.editSelected);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.bottm-popup {
		width: 100%;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		padding: 25rpx 25rpx 180rpx;
		position: relative;
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		background: #fff;

		.guige-top {
			height: 180rpx;
			display: flex;
			flex-flow: row nowrap;
			padding-bottom: 10rpx;
			border-bottom: 0.5px solid #EEEEEE;

			.guige-img {
				flex: 3;
				border-radius: 5rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.guige-price-wrap {
				flex: 9;
				display: flex;
				flex-flow: column nowrap;
				padding-left: 15rpx;

				.guige-close-box {
					flex: 1;
					display: flex;
					flex-flow: row nowrap;
					justify-content: flex-end;
					align-items: flex-start;
				}

				.guige-price {
					flex: 1;
					font-size: 16px;
					font-weight: bold;
					color: #FC4543;
				}

				.guige-emaining {
					flex: 1;
					font-size: 12px;
					color: #BCBDBE;
				}

				.guige-description {
					flex: 1;
					font-size: 12px;
					color: #BCBDBE;
				}

				.guige-description,
				.guige-emaining {
					display: flex;
					flex-flow: row nowrap;
					align-items: flex-end;
				}
			}
		}

		.guige-body {
			border-bottom: 0.5px solid #EEEEEE;

			.guige-body-tips {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 14px;
			}

			.goods-box-wrap {
				min-height: 90rpx;
				overflow: hidden;

				.goods-item {
					float: left;
					height: 70rpx;
					padding: 10rpx;
					display: flex;
					flex-flow: row nowrap;
					align-items: center;
					background: #F6F7F9;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					margin-right: 20rpx;

					.goods-item-img {
						height: 50rpx;
						width: 50rpx;
						margin-right: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.goods-item-text {
						max-width: 675rpx;
						font-size: 14px;
						line-height: 70rpx;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
					}
				}
			}
		}

		.guige-sure {
			width: 700rpx;
			height: 70rpx;
			line-height: 70rpx;
			position: absolute;
			bottom: 10rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
			background-color: #FC4543;
			color: white;
			border-radius: 35rpx;
			font-size: 16px;
			text-align: center;
		}

	}

	.goods-list {
		.goods-item {
			margin: 20rpx 20rpx 0;
			padding: 20rpx;
			background-color: #fff;

			.goods-top {
				height: 180rpx;
				width: 100%;
				display: flex;
				flex-flow: row nowrap;

				.goods-slecet-btn {
					width: 80rpx;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					radio {
						transform: scale(0.7);
					}
				}

				.goods-img {
					width: 180rpx;
					height: 180rpx;
					background-color: #FC4543;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						height: 100%;
						width: 100%;
						object-fit: cover;
						object-position: center;
					}
				}

				.goods-info {
					width: 450rpx;
					padding-left: 10rpx;
					overflow: hidden;

					.goods-description {
						font-size: 14px;
					}

					.goods-guige {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						float: left;
						margin-top: 10rpx;
						padding: 5rpx 15rpx;
						font-size: 12px;
						background-color: #f7f8fa;
						color: #acadaf;
						border-radius: 10rpx;

						.icon-arrowdow {
							padding: 0 15rpx;
							vertical-align: middle;
						}
					}
				}
			}

			.goods-bottom {
				padding-top: 20rpx;
				display: flex;
				flex-flow: row nowrap;

				.blank-box {
					width: 260rpx;
				}

				.goods-price-wrap {
					display: flex;
					flex-flow: row nowrap;
					justify-content: space-between;
					align-items: center;
					width: 450rpx;
					padding-left: 10rpx;

					.goods-peice {
						color: red;

						text {
							font-size: 12px;
						}
					}
				}
			}
		}
	}

	.shopcat {
		background-color: #f8f8f8;
		padding-bottom: 90rpx;
	}

	.shop-tab {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		background-color: #fff;

		.shop-tab-left {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			height: 100%;
			line-height: 80rpx;

			.shop-name {
				padding: 0 10rpx;
				font-size: 14px;
			}
		}

		.shop-tab-right {
			font-size: 14px;
			color: #6c6c6c;
		}
	}

	.settle-accounts {
		width: 100%;
		height: 90rpx;
		border-top: 1px solid #e6e6e6;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;

		.accounts-left {
			flex: 7;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-around;
			line-height: 90rpx;
			font-size: 14px;

			.selectAll {
				flex: 4;
				text-align: center;

				label {
					height: 90rpx;
					width: 100%;
				}

				.radio {
					transform: scale(0.7);
				}
			}

			.total-price {
				flex: 10;

				.total-num {
					padding-left: 20rpx;
					font-size: 16px;
					font-weight: bold;
				}
			}
		}

		.accounts-right {
			flex: 3;
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			align-items: center;

			.settle-btn {
				height: 80rpx;
				border-radius: 40rpx;
				line-height: 80rpx;
				padding: 0 50rpx;
				background-color: red;
			}
		}
	}
</style>
